<script setup lang="ts">
import chatu1 from '@/assets/preview1.png'
import { ref } from 'vue';
const active = ref(0)
</script>
<template>
    <div @click="$router.push('/preview/guide2')">
        <p class="skip" @click="$router.push('/login')">跳过</p>
        <br>
        <div class="container">
            <section>

                <van-image width="160" height="160" :src="chatu1"></van-image>
            </section>
            <div class="des">
                <p class="des1">
                    <span>
                        更好的学习方式
                    </span>
                    <span class="mtp">
                        探索编程世界，从这里启航!
                    </span>
                </p>

                <p class="des2">
                    <span>在慕课网，每一行代码都是梦想的阶梯。 无论你是编程新手，还是进阶高手，
                        我们都为你准备了丰富的课程与资源，
                        助你轻松掌握编程技能，开启职业生涯新篇章！
                    </span>
                </p>
            </div>

        </div>
        <van-steps :active="active" active-color="#f66">
            <van-step>0</van-step>
            <van-step>0</van-step>
            <van-step>0</van-step>

        </van-steps>

    </div>
    <div class="login" @click="$router.push('/login')">
        <van-button >立即登录</van-button>
    </div>
</template>
<style lang="scss" scoped>
.skip {
    color: blue;
    float: right;
    margin-top: 20px;
    margin-bottom: 40px;
    margin-right: 20vw;
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 100vw;

    .des {
        height: 40vw;
        width: 70vw;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        flex-direction: column;
        margin-top: 0.6rem;

        .des1 {

            font-size: 0.18rem;
            display: flex;
            flex-direction: column;
            text-align: center
        }

        .des2 {
            width: 70vw;
            font-size: 0.12rem;
            color: #ccc;
            text-align: center;
        }


    }
}

.van-steps--horizontal {
    width: 40vw;
    margin: 20px auto;
}

.login {
    display: flex;
    justify-content: center;
    margin-top: 40px;

    .van-button {
        color: blue;
        width: 70vw;
    }
}
</style>